<html><!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>Demo - FilterMenu 使用示例</title>
    <link href="../menu/assets/menu.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/menu/assets/menu.css" rel="stylesheet"/>
    <link href="../menu/assets/menuitem.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/menu/assets/menuitem.css" rel="stylesheet"/>
    <link rel="stylesheet" href="assets/filtermenu.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/filter-menu/assets/filtermenu.css">
    <style>
        .hasChildren .ks-menuitem-content {
            background: url("../../../../../../a.tbcdn.cn/apps/sell/1.0/img/ic_bg.png") no-repeat scroll 500px 500px transparent;
            background-position: 100% -78px;
        }

        .ks-menuitem-selected {
            background-color: #D6EDF4;
            color: #1B4D91;
        }

        .ks-menuitem-hit {
            font-weight: bold;
            color: red;
        }

        .ks-menuitem {
            padding-right: 10px;
        }
    </style>
</head>
<body>

<h1>可过滤菜单</h1>

<h2>操作指南</h2>

<ol>
    <li>可在输入框输入过滤</li>
    <li>上下键过滤项间导航</li>
    <li>输入字后，再输入 ，或, 根据当前高亮项进行自动补全</li>
</ol>

<h2>从已知元素生成</h2>

<div id="filterMenuExist"
     class="ks-filter-menu ks-menu" style="width: 500px">
    <div class='ks-filter-menu-input-wrap'>
        <div class="ks-filter-menu-placeholder">from markup</div>
        <input autocomplete="off" class="ks-filter-menu-input"/>
    </div>
    <div class="ks-filter-menu-content" style="height: 200px;overflow: auto;">
        <div class="ks-menuitem-selectable ks-menuitem">女鞋1</div>
        <div class="ks-menuitem-selectable ks-menuitem">家居服务2</div>
        <div class="ks-menuitem-selectable ks-menuitem">手机3</div>
        <div class="ks-menuitem-selectable ks-menuitem">女鞋4</div>
        <div class="ks-menuitem-selectable ks-menuitem">家居服务5</div>
        <div class="ks-menuitem-selectable ks-menuitem">手机6</div>
        <div class="ks-menuitem-selectable ks-menuitem">女鞋7</div>
        <div class="ks-menuitem-selectable ks-menuitem">家居服务8</div>
        <div class="ks-menuitem-selectable ks-menuitem">手机9</div>
        <div class="ks-menuitem-selectable ks-menuitem">女鞋10</div>
        <div class="ks-menuitem-selectable ks-menuitem">家居服务11</div>
        <div class="ks-menuitem-selectable ks-menuitem">手机12</div>
    </div>
</div>
<br/>
<br/>

<h2>自定义过滤策略（拼音支持）</h2>

<div id="container">

</div>
<button id="reset">reset</button>


<script src="../../../../../../g.alicdn.com/kissy/k/1.4.7/seed.js" tppabs="http://g.alicdn.com/kissy/k/1.4.7/seed.js"></script>
<script>
    KISSY.use("menu,filter-menu, json, gallery/pageNotification/1.0/index", function (S, Menu, FilterMenu, JSON, PN) {
        var pn = new PN({
            "closeButton": true,
            "positionClass": "page-notification-top-right",
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        });

        window.alert = function() {
            var args = arguments[0];
            args = S.isObject(args) ? JSON.stringify(args) : args.toString();
            pn.success(args);
        };
        if (1)(function () {

            var m1 = new Menu.Item({
                selectable: true,
                content: "女鞋",
                pinyin: "nx"
            });
            var m4 = new Menu.Item({

                selectable: true,
                content: "女装女服",
                pinyin: "nznf"
            });
            var m2 = new Menu.Item({

                selectable: true, content: "家居服务",
                elCls: "hasChildren",
                pinyin: "jjfw"
            });
            var m3 = new Menu.Item({

                selectable: true,
                content: "手机",
                elCls: "hasChildren",
                pinyin: "sj"
            });
            var filterMenu = new FilterMenu({
                render: "#container",
                width: 500,
                allowMultiple: true,
                placeholder: "请输入"
            });
            filterMenu.addChild(m1);
            filterMenu.addChild(m2);
            filterMenu.addChild(m3);
            filterMenu.addChild(m4);
            filterMenu.render();
            var selected = null;

            var origFilterItems = filterMenu.filterItems;

            /**
             * 自定义过滤策略，不自定义则是简单的内容 indexOf 查找
             * @param str
             */
            filterMenu.filterItems = function (str) {
                var self = this,
                        _labelEl = self.get("placeholderEl"),
                        filterInput = self.get("filterInput");

                // 有过滤条件提示隐藏，否则提示显示
                _labelEl[str ? "hide" : "show"]();

                var children = self.get("children");

                // 拼音
                if (/^[a-z\s]+$/i.test(str)) {

                    // 过滤所有子组件
                    S.each(children, function (c) {
                        var pinyin = c.get("pinyin"),
                                content = c.get("content");

                        var index;
                        if ((index = pinyin.indexOf(str)) > -1) {
                            // 如果符合过滤项
                            // 显示
                            c.show();
                            content = content.substring(0, index) +

                                    "<span class='" + "ks-menuitem-hit" + "'>" +
                                    content.substring(index, index + str.length)
                                    + "<" + "/span>"
                                    + content.substring(index + str.length, content.length);

                            // 匹配子串着重 wrap
                            c.get("el").html(content);
                        } else {
                            c.hide();
                        }
                    });

                } else {
                    origFilterItems.call(this, str);
                }
            };

            filterMenu.on("click", function (e) {
                if (selected != e.target) {
                    selected && selected.set("selected", false);
                    selected = e.target;
                    alert("selected : " + selected.get("content"));
                }
            });


            S.all("#reset").on("click", function () {
                filterMenu.reset();
            });
        })();

        (function () {
            /**
             *  从 html 生成
             */
            var filterMenu = new FilterMenu({
                srcNode: '#filterMenuExist',
                width: 200
            });

            filterMenu.render();

            var selected = null;

            filterMenu.on("click", function (e) {
                if (selected != e.target) {
                    selected && selected.set("selected", false);
                    selected = e.target;
                    alert("selected : " + selected.get("content"));
                }
            });

        })();

    });
</script>
</body>
</html>